<template>
	<div class="day_main">
		<div class="day_top">
			<div class="top_title">
				<img src="../assets/images/prev2.png" alt="" @click="prev">
				<div @click="show = true;day=''" style="cursor: pointer;">{{nowTime}} 运维日报</div>
				<img src="../assets/images/next2.png" alt="" @click="next">
			</div>
			<div class="pies">
				<div class="pie_box">
					<div class="pie_title">{{info.phoneAnsweredPer}}<span>%</span></div>
					<div class="pie" ref="left"></div>
					<div class="ectitle">电话接听率</div>
				</div>
				<div class="pie_box">
					<div class="pie_title">{{info.gdFinishedPer}}<span>%</span></div>
					<div class="pie" ref="center"></div>
					<div class="ectitle">工单完成率</div>
				</div>
				<div class="pie_box">
					<div class="pie_title">{{info.serverSolvedPer}}<span>%</span></div>
					<div class="pie" ref="right"></div>
					<div class="ectitle">电话解决率</div>
				</div>
			</div>
		</div>

		<div class="day_list1">
			<div class="day_li1">
				<img src="../assets/images/li1.png" alt="">
				<div class="day_li1_right">
					<div class="day_li1_title">通话 {{info.phoneCount}} 次</div>
					<div class="day_li1_info">
						<span>已接 {{info.answered}}</span>
						<span>未接 {{info.unanswered}}</span>
						<span>呼出 {{info.phoneOut}}</span>
						<span>找人 {{info.findPerson}}</span>
						<span>无效 {{info.invalid}}</span>
					</div>
				</div>
			</div>
			<div class="day_li1">
				<img src="../assets/images/li2.png" alt="">
				<div class="day_li1_right">
					<div class="day_li1_title">工单创建 {{info.gdCount}} 条</div>
					<div class="day_li1_info">
						<span>已完成 {{info.gdFinishCount}}</span>
						<span>未派单 {{info.noArrangedCount}}</span>
						<span>待接单 {{info.waitRec}}</span>
						<span>处理中 {{info.handling}}</span>
						<span>已终止 {{info.hasEnd}}</span>
						<!-- 	<span>建单 3</span> -->
						<!-- <span>关联 7</span> -->
						<!-- <span>找人 {{info.findPerson}}</span>
						<span>无效 {{info.invalid}}</span> -->
						<!-- <span>未操作 5</span> -->
					</div>
				</div>
			</div>
			<div class="day_li1">
				<img src="../assets/images/li3.png" alt="">
				<div class="day_li1_right">
					<div class="day_li1_title">电话解决 {{info.serverFinishedCount}} 条</div>
					<!-- <div class="day_li1_info">
						<span>已完成 {{info.gdFinishCount}}</span>
						<span>未完成 {{info.gdUnFinishedCount}}</span>
						<span>服务台解决 {{info.serverFinishedCount}}</span>
					</div> -->
				</div>
			</div>
		</div>
		<div class="day_list2">
			<div class="day_li2">
				<div class="day_li2_title_box" @click="getlist5">
					<div class="day_li2_title">未接电话 <span class="num">{{info.unanswered}}</span></div>
					<img src="../assets/images/up2.png" alt=""
						:style="show5?'transform:rotate(0deg)':'transform:rotate(180deg)'">
				</div>
				<div v-if="show5">
					
					<div class="day_li2_empty" v-if="list5.length == 0">无记录</div>

					<div class="day_table" v-else>
						<div class="table">
							<div class="tr">
								<div class="th" style="width: 33%;">时间</div>
								<div class="th" style="width: 33%;">来电号码</div>
								<div class="th" style="width: 33%;">呼叫号码</div>
							</div>
							<block v-for="item,index in list5" style="width: 100%;">
								<div class="tr">
									<div class="td" style="width: 33%;">{{item.createDate}}</div>
									<div class="td" style="width: 33%;">{{item.comePhone}}</div>
									<div class="td" style="width: 33%;">{{item.toPhone}}</div>
								</div>
							</block>
						</div>

					</div>
				</div>
			</div>

			<div class="day_li2">
				<div class="day_li2_title_box" @click="getlist2">
					<div class="day_li2_title">待派单 <span class="num">{{info.noArrangedCount}}</span></div>
					<img src="../assets/images/up2.png" alt=""
						:style="show2?'transform:rotate(0deg)':'transform:rotate(180deg)'">
				</div>
				<div v-if="show2">
					<div class="day_li2_empty" v-if="list2.length == 0">无记录</div>
					<div class="day_li2_li" v-else v-for="item in list2">
						<div class="shu"></div>
						<div class="day_li2_li_right">
							<div class="day_li2_li_title">{{item.departName}}
								<span>{{item.faultDescription}}</span>
							</div>
							<div class="day_li2_li_info">{{item.createDate}} | 建单：{{item.createName}}
								| 处理：待派单
							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="day_li2">
				<div class="day_li2_title_box" @click="getlist3">
					<div class="day_li2_title">未完成 <span>(按工程师)</span></div>
					<img src="../assets/images/up2.png" alt=""
						:style="show3?'transform:rotate(0deg)':'transform:rotate(180deg)'">
				</div>
				<div v-if="show3">
					<div class="day_li2_empty" v-if="list3.length ==0">无记录</div>
					<div class="day_table" v-else>
						<div class="table">
							<div class="tr">
								<div class="th">人员</div>
								<div class="th">待接单</div>
								<div class="th">未完成</div>
								<div class="th">合计</div>
								<div class="th">详情</div>
							</div>
							<block v-for="item,index in list3" style="width: 100%;">
								<div class="tr">
									<div class="td">{{item.name}}</div>
									<div class="td">{{item.wait}}</div>
									<div class="td">{{item.handle}}</div>
									<div class="td">{{item.sum}}</div>
									<div class="td">
										<div class="infobtn" @click="getinfo3(index,item.id)">详情</div>
									</div>
								</div>

								<div class="day_li2_li" v-if="item.show" v-for="item2 in item.info">
									<div class="shu"></div>
									<div class="day_li2_li_right">
										<div class="day_li2_li_title">{{item2.departName}}
											<span>{{item2.faultDescription}}</span>
										</div>
										<div class="day_li2_li_info">{{item2.createDate}} |
											建单：{{item2.createName}}
											| 处理：{{item2.stateStr}}
										</div>
									</div>

								</div>
							</block>
						</div>
					</div>
				</div>

			</div>

			<div class="day_li2">
				<div class="day_li2_title_box" @click="getlist1">
					<div class="day_li2_title">未完成 <span>(按报修科室)</span></div>
					<img src="../assets/images/up2.png" alt=""
						:style="show1?'transform:rotate(0deg)':'transform:rotate(180deg)'">
				</div>

				<div class="day_ll" v-if="show1">
					<div class="day_li2_empty" v-if="list1.length == 0">无记录</div>

					<div class="day_table" v-else>
						<div class="table">
							<div class="tr">
								<div class="th">部门</div>
								<div class="th">待接单</div>
								<div class="th">未完成</div>
								<div class="th">合计</div>
								<div class="th">详情</div>
							</div>
							<block v-for="item,index in list1" style="width: 100%;">
								<div class="tr">
									<div class="td">{{item.name}}</div>
									<div class="td">{{item.wait}}</div>
									<div class="td">{{item.handle}}</div>
									<div class="td">{{item.sum}}</div>
									<div class="td">
										<div class="infobtn" @click="getinfo1(index,item.id)">详情</div>
									</div>
								</div>

								<div class="day_li2_li" v-if="item.show" v-for="item2 in item.info">
									<div class="shu"></div>
									<div class="day_li2_li_right">
										<div class="day_li2_li_title">{{item2.departName}}
											<span>{{item2.faultDescription}}</span>
										</div>
										<div class="day_li2_li_info">{{item2.createDate}} |
											建单：{{item2.createName}}
											| 处理：{{item2.stateStr}}
										</div>
									</div>

								</div>
							</block>
						</div>
					</div>
				</div>
			</div>

			<div class="day_li2">
				<div class="day_li2_title_box" @click="getlist4">
					<div class="day_li2_title">退回服务台 <span class="num">{{info.returnCount}}</span></div>
					<img src="../assets/images/up2.png" alt=""
						:style="show4?'transform:rotate(0deg)':'transform:rotate(180deg)'">
				</div>
				<div v-if="show4">
					<div class="day_li2_empty" v-if="list4.length == 0">无记录</div>
					<div class="day_li2_li" v-else v-for="item in list4">
						<div class="shu"></div>
						<div class="day_li2_li_right">
							<div class="day_li2_li_title">{{item.departName}}
								<span>{{item.faultDescription}}</span>
							</div>
							<div class="day_li2_li_info">{{item.createDate}} | 建单：{{item.createName}}
								| 处理：{{item.stateStr}}
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!-- <van-calendar v-model="show" @confirm="onConfirm" color="#4286F5" :min-date="minDate" /> -->

		<el-dialog title="请选择日期" :visible.sync="show" width="80%">
			<el-date-picker v-model="day" type="date" style="width: 100%;" placeholder="选择日期" format="yyyy年MM月dd日">
			</el-date-picker>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="show = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		name: 'app',
		data() {
			return {
				nowTime: "",
				day: "",
				year: "",
				month: "",
				date: "",
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				info: {},
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				minDate: new Date(2010, 0, 1)
			}
		},
		mounted() {
			this.nowTimes()
			// var url = window.location.origin.replace(/\/gdmobile/, ''); //去掉右括号			
			// Vue.prototype.$url = url + '/gd'
			// sessionStorage.setItem('url', url + '/gd')
			document.title = this.nowTime

		},
		watch: {
			day: {
				handler(newValue, oldValue) {
					if (newValue) {
						console.log(newValue)
						this.nowTime = this.formatDate(newValue);
						document.title = this.nowTime
						this.getleft()
					}
				}
			},
		},
		methods: {

			formatDate(date) {
				this.year = date.getFullYear()
				this.month = date.getMonth() + 1
				this.date = date.getDate()


				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

				return year + "年" + month + "月" + day + "日";
			},
			onConfirm(date) {
				this.show = false;
				this.nowTime = this.formatDate(date);
				document.title = this.nowTime
				this.getleft()
			},
			getinfo1(index, id) {
				if (this.list1[index].show) {
					this.list1[index].show = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
					id: id
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.post(this.$url + '/daily/newspaper/deptNoArrangedInfo', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						// alert(JSON.stringify(response.data.data))
						that.list1[index].info = response.data.data
						that.list1[index].show = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getinfo3(index, id) {
				if (this.list3[index].show) {
					this.list3[index].show = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
					id: id
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.post(this.$url + '/daily/newspaper/personNoArrangedInfo', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list3[index].info = response.data.data
						that.list3[index].show = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getlist5() {
				if (this.show5) {
					this.show5 = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.post(this.$url + '/daily/newspaper/unAnswerPhoneList', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						for (var i = 0; i < response.data.data.length; i++) {
							response.data.data[i].show = false
							response.data.data[i].info = []
						}
						that.list5 = response.data.data
						that.show5 = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getlist3() {
				if (this.show3) {
					this.show3 = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.post(this.$url + '/daily/newspaper/gdPerNoFinishedList', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						for (var i = 0; i < response.data.data.length; i++) {
							response.data.data[i].show = false
							response.data.data[i].info = []
						}
						that.list3 = response.data.data
						that.show3 = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getlist4() {
				if (this.show4) {
					this.show4 = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
				}
				this.$http.post(this.$url + '/daily/newspaper/noArrangedAfterReturn', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list4 = response.data.data
						that.show4 = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getlist2() {
				if (this.show2) {
					this.show2 = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.post(this.$url + '/daily/newspaper/noArranged', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list2 = response.data.data
						that.show2 = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getlist1() {
				if (this.show1) {
					this.show1 = false
					return
				}
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.post(this.$url + '/daily/newspaper/gdDeptNoFinishedList', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						for (var i = 0; i < response.data.data.length; i++) {
							response.data.data[i].show = false
							response.data.data[i].info = []
						}
						that.list1 = response.data.data
						that.show1 = true
						// that.$toast.clear()
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			prev() {
				var timestamp = Date.parse(this.year + '-' + this.month + '-' + this.date + ' 00:00:00')
				timestamp = new Date(timestamp - 24 * 60 * 60 * 1000); //当前时间戳（毫秒） - 1天毫秒数 = 前一天时间戳
				this.timeFormate(timestamp)
			},
			next() {
				var timestamp = Date.parse(this.year + '-' + this.month + '-' + this.date + ' 00:00:00')
				timestamp = new Date(timestamp + 24 * 60 * 60 * 1000); //当前时间戳（毫秒） - 1天毫秒数 = 前一天时间戳
				this.timeFormate(timestamp)
			},

			// 获取饼状图数据
			getleft() {
				var that = this
				var param = {
					year: this.year,
					month: this.month,
					day: this.date,
					// year: 2022,
					// month: '12',
					// date: '05',
				}
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				this.$http.defaults.headers["Authorization"] = sessionStorage.getItem('token');
				this.$http.post(this.$url + '/daily/newspaper/getDailyNewspapaerData', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						// console.log(response.data.data)
						that.info = response.data.data
						// console.log(that.info)
						that.info.phoneAnsweredPer = that.info.phoneAnsweredPer.replace(/\%/, '')
						that.info.gdFinishedPer = that.info.gdFinishedPer.replace(/\%/, '')
						that.info.serverSolvedPer = that.info.serverSolvedPer.replace(/\%/, '')
						that.getpie();
						that.getpie2();
						that.getpie3();
						// that.$toast.clear()
						that.$forceUpdate()
					})

					.catch(function(error) {
						console.log(error);
					});
			},

			getpie() {
				var dom = this.$refs.left
				// console.log(dom)
				var myChart = this.$echarts.init(dom, null, {
					renderer: 'canvas',
					useDirtyRect: false
				});
				var app = {};

				var option;
				//
				option = {
					// title: {
					// 	text: "电话接听率",
					// 	bottom: '15rem',
					// 	textStyle: {
					// 		fontSize: '.75rem',
					// 		color: "#ffffff",
					// 		fontWeight: "normal"
					// 	},
					// 	left: 'center',
					// },
					angleAxis: {
						max: 100, // 满分
						clockwise: true, // 逆时针
						// 隐藏刻度线
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					radiusAxis: {
						type: 'category',
						// 隐藏刻度线
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					polar: {
						center: ['50%', '40%'],
						radius: '130%' //图形大小
					},
					series: [{
						// roundCap: true,
						type: 'bar',
						data: [{
							// name: '',
							value: this.info.phoneAnsweredPer,
							itemStyle: {
								normal: {
									color: '#b3d465',

								}
							},
						}],
						coordinateSystem: 'polar',
						barWidth: '15%',
						barGap: '-100%', // 两环重叠
						z: 2,
					}, { // 灰色环
						type: 'bar',
						data: [{
							value: 100,
							itemStyle: {
								color: '#4267F7',
							}
						}],
						coordinateSystem: 'polar',
						// roundCap: true,
						barWidth: '15%',
						barGap: '-100%', // 两环重叠
						z: 1
					}, ]
					// color: ['#b3d465']
				};

				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}
				myChart.on("click", this.clickFunc);

				window.addEventListener('resize', myChart.resize);
			},
			getpie2() {
				var dom = this.$refs.center
				// console.log(dom)
				var myChart = this.$echarts.init(dom, null, {
					renderer: 'canvas',
					useDirtyRect: false
				});
				var app = {};

				var option;
				//
				option = {
					// title: {
					// 	text: "工单完成率",
					// 	bottom: '15rem',
					// 	textStyle: {
					// 		fontSize: '.75rem',
					// 		color: "#ffffff",
					// 		fontWeight: "normal"
					// 	},
					// 	left: 'center',
					// },
					angleAxis: {
						max: 100, // 满分
						clockwise: true, // 逆时针
						// 隐藏刻度线
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					radiusAxis: {
						type: 'category',
						// 隐藏刻度线
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					polar: {
						center: ['50%', '40%'],
						radius: '130%' //图形大小
					},
					series: [{
						// roundCap: true,
						type: 'bar',
						data: [{
							// name: '',
							value: this.info.gdFinishedPer,
							itemStyle: {
								normal: {
									color: '#f8b551',

								}
							},
						}],
						coordinateSystem: 'polar',
						barWidth: '15%',
						barGap: '-100%', // 两环重叠
						z: 2,
					}, { // 灰色环
						type: 'bar',
						data: [{
							value: 100,
							itemStyle: {
								color: '#4267F7',
							}
						}],
						coordinateSystem: 'polar',
						// roundCap: true,
						barWidth: '15%',
						barGap: '-100%', // 两环重叠
						z: 1
					}, ]
					// color: ['#b3d465']
				};

				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}
				myChart.on("click", this.clickFunc);

				window.addEventListener('resize', myChart.resize);
			},
			getpie3() {
				var dom = this.$refs.right
				// console.log(dom)
				var myChart = this.$echarts.init(dom, null, {
					renderer: 'canvas',
					useDirtyRect: false
				});
				var app = {};

				var option;
				//
				option = {
					// title: {
					// 	text: "服务台解决率",
					// 	bottom: '15rem',
					// 	textStyle: {
					// 		fontSize: '.75rem',
					// 		color: "#ffffff",
					// 		fontWeight: "normal"
					// 	},
					// 	left: 'center',
					// },
					angleAxis: {
						max: 100, // 满分
						clockwise: true, // 逆时针
						// 隐藏刻度线
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					radiusAxis: {
						type: 'category',
						// 隐藏刻度线
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					polar: {
						center: ['50%', '40%'],
						radius: '130%' //图形大小
					},
					series: [{
						// roundCap: true,
						type: 'bar',
						data: [{
							// name: '',
							value: this.info.serverSolvedPer,
							itemStyle: {
								normal: {
									color: '#f19149',

								}
							},
						}],
						coordinateSystem: 'polar',
						barWidth: '15%',
						barGap: '-100%', // 两环重叠
						z: 2,
					}, { // 灰色环
						type: 'bar',
						data: [{
							value: 100,
							itemStyle: {
								color: '#4267F7',
							}
						}],
						coordinateSystem: 'polar',
						// roundCap: true,
						barWidth: '15%',
						barGap: '-100%', // 两环重叠
						z: 1
					}, ]
					// color: ['#b3d465']
				};

				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}
				myChart.on("click", this.clickFunc);

				window.addEventListener('resize', myChart.resize);
			},
			//显示当前时间（年月日时分秒）
			timeFormate(timeStamp) {
				// this.$toast.loading({
				// 	message: '获取中...',
				// 	forbidClick: true,
				// });
				console.log(timeStamp)
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
					.getDate();

				this.nowTime = year + "年" + month + "月" + date + "日";
				this.year = year
				this.month = new Date(timeStamp).getMonth() + 1
				this.date = new Date(timeStamp).getDate()
				document.title = this.nowTime
				var that = this
				// setTimeout(function() {
				// if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'undefined' &&
				// 	sessionStorage.getItem('token') != 'null') {
				// 	// alert('token')
				that.getleft()
				that.show1 = false
				that.show2 = false
				that.show3 = false
				that.show4 = false
				that.show5 = false

				// 	} else {
				// 		window.location.replace(sessionStorage.getItem('wecomurl'))
				// 	}
				// }, 1000)

			},
			getcode(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
				var r = window.location.search.substr(1).match(reg)
				if (r != null) return unescape(r[2]);
				return null
			},
			nowTimes() {
				this.timeFormate(new Date());
			},
		}
	}
</script>

<style scoped>
	.ectitle {
		color: #fff;
		font-size: 3vw;
		width: 100%;
		text-align: center;
		margin-top: -8vw;
	}

	.tr {
		display: flex;
		align-items: center;
	}

	.infobtn {
		width: 13vw;
		background-color: #eaf7f0;
		color: #32B16C;
		border-radius: 1vw;
		padding: 1vw 2vw;
		margin: 0 auto;
	}

	.tr {
		height: 10.6vw;
		border-bottom: 1px solid #E5E5E5;
	}

	.td {
		width: 20%;
	}

	.th {
		color: #666;
		width: 20%;
	}

	.table {
		width: 100%;
		border: 1px solid #DCDCDC;
		font-size: 3.2vw;
		color: #32B16C;
		text-align: center;
		border-collapse: collapse;
	}

	.day_li2_li_info span {
		/* color: #D2D2D2; */
		margin: 0 2vw;
	}

	.day_li2_li_info {
		font-size: 3.2vw;
		font-family: Microsoft YaHei;
		font-weight: 400;
		display: flex;
		align-items: center;
		color: #888888;

	}

	.day_li2_li {
		display: flex;
		width: 100%;
		padding: 5vw 3.7vw 4vw;
		background: #f6f6f6;
		border-radius: 2.2vw;
		margin-bottom: 2.6vw;
	}

	.day_li2_li_title span {
		color: #4286F5;
	}

	.day_li2_li_title {
		font-size: 4vw;
		line-height: 4vw;
		font-family: Microsoft YaHei;
		color: #000000;
		margin-bottom: 2.6vw;
		width: 80%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
	}

	.shu {
		width: .5vw;
		height: 3.8vw;
		margin-top: .4vw;
		margin-right: 2.4vw;
		background: #4286F5;
		border-radius: .4vw;
	}

	.day_li2_title .num {
		font-weight: bold;
		color: #4286F5;
	}

	.day_li2 {
		margin-bottom: 4.4vw;
	}

	.day_li2_empty {
		width: 100%;
		/* height: 58px; */
		padding: 1.8vw 0;
		background: #f6f6f6;
		border-radius: 1.3vw;
		font-size: 4vw;
		line-height: 5vw;
		font-family: Microsoft YaHei;
		color: #AAAAAA;
		text-align: center;

	}

	.day_li2_title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 2.2vw;
	}

	.day_li2_title_box img {
		width: 4.5vw;
		transition: transform .5s;
	}

	.day_li2_title span {
		color: #999999;
		font-weight: normal;
	}

	.day_li2_title {
		font-size: 4vw;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #000000;
	}

	.day_li1_info span {
		margin-right: 2vw;
		margin-top: 2vw;
	}

	.day_li1_info {
		color: #7FA9F8;
		font-size: 3.2vw;
	}

	.day_li1_title {
		font-size: 4vw;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #4286F5;
	}

	.day_li1 img {
		width: 9.6vw;
		height: 9.6vw;
		margin-right: 2.2vw;
	}

	.day_list1 {
		margin-top: 2.4vw;
		margin-bottom: 6.4vw;
	}

	.day_li1 {
		width: 100%;
		/* height: 111px; */
		padding: 2.6vw 2.9vw;
		background: #ecf3fe;
		border-radius: 1.3vw;
		margin-bottom: 2.2vw;
		display: flex;
		align-items: center;
	}

	.pie_title span {
		font-size: 3.4vw;
	}

	.pie_title {
		color: #fff;
		position: absolute;
		z-index: 2;
		left: 7vw;
		top: 10.1vw;
		width: 16vw;
		text-align: center;
		font-size: 5vw;
	}

	.pies {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pie {
		width: 30vw;
		height: 37vw;
	}

	.pie_box {
		width: 30vw;
		height: 37vw;
		position: relative;
	}

	.top_title img {
		width: 9vw;
	}

	.top_title {
		display: flex;
		align-items: center;
		font-size: 4.8vw;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
		padding: 0 2vw;
		justify-content: space-between;
	}

	.day_top {
		/* height: 355px; */
		background: #4286F5;
		border-radius: 10px;
		padding: 4vw 0 5.6vw;
	}

	.day_main {
		padding: 2.4vw 4vw;
	}


	/* 屏幕尺寸大于500的时候满足 */
	@media (min-width: 500px) {
		.ectitle {
			font-size: 18px;
			width: 100%;
			text-align: center;
			margin-top: -50px;
		}

		.infobtn {
			width: 60px;
			background-color: #eaf7f0;
			color: #32B16C;
			border-radius: 5px;
			padding: 5px 10px;
			margin: 0 auto;
		}

		.tr {
			height: 60px;
			border-bottom: 1px solid #E5E5E5;
		}

		.table {
			font-size: 14px;
		}

		.day_li2_li_info {
			font-size: 14px;
		}

		.day_li2_li {
			padding: 30px 28px;
			border-radius: 10px;
			margin-bottom: 20px;
		}


		.day_li2_li_title {
			font-size: 16px;
			line-height: 16px;
			margin-bottom: 20px;
		}

		.shu {
			width: 4px;
			height: 18px;
			margin-right: 10px;
			border-radius: 4px;
			margin-top: 0px;
		}


		.day_li2 {
			margin-bottom: 35px;
		}

		.day_li2_empty {
			padding: 18px 0;
			border-radius: 10px;
			font-size: 18px;
			line-height: 20px;

		}

		.day_li2_title_box {
			margin-bottom: 20px;
		}

		.day_li2_title_box img {
			width: 20px;
			transition: transform .5s;
		}

		.day_li2_title {
			font-size: 20px;
		}

		.day_li1_info span {
			margin-right: 18px;
			margin-top: 18px;
		}

		.day_li1_info {
			font-size: 16px;
		}

		.day_li1_title {
			font-size: 18px;
		}

		.day_li1 img {
			width: 50px;
			height: 50px;
			margin-right: 20px;
		}

		.day_list1 {
			margin-top: 20px;
			margin-bottom: 50px;
		}

		.day_li1 {
			padding: 20px;
			border-radius: 10px;
			margin-bottom: 20px;
		}

		.pie_title span {
			font-size: 16px;
		}

		.pie_title {
			left: 27%;
			top: 109px;
			width: 48%;
			text-align: center;
			font-size: 20px;
		}

		.pie {
			width: 100%;
			height: 300px;
		}

		.pies {
			justify-content: space-around;
			margin-top: 50px;
		}

		.pie_box {
			width: 20%;
			height: 300px;
		}

		.top_title img {
			width: 50px;
		}

		.top_title {
			font-size: 36px;
			padding: 0 18px;
		}

		.day_top {
			border-radius: 10px;
			padding: 30px 0 42px;
		}

		.day_main {
			padding: 18px 30px;
		}

	}
</style>
